<template>
  <span>
    <el-container>
      <my-component-header @setDialogFormVisible="setDialogFormVisible" />

      <el-main style="padding: 0px 100px">
        <div class="nav_menu">
          <my-component-navmenu :defaultActivate="defaultActivate" />

          <div class="content">
            <!-- 左方导航栏 -->
            <div class="left">
              <div>
                <el-menu
                  default-active="1-1"
                  :default-openeds="['1']"
                  class="el-menu-vertical-demo"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>个人信息</span>
                    </template>
                  </el-submenu>
                </el-menu>
              </div>
            </div>

            <div class="right">
              <el-card style="height: 570px" class="box-card">
                <el-tabs tab-position="left">
                  <el-tab-pane label="客户信息">
                    <el-form
                      label-width="80px"
                      ref="customerInfoRef"
                      :model="customerInfoForm"
                    >
                      <el-form-item
                        label="客户名"
                        prop="customername"
                        :rules="[
                          {
                            required: true,
                            message: '客户名不可为空！',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          v-model="customerInfoForm.customername"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>

                      <el-form-item
                        label="组织机构"
                        prop="customerorgan"
                        :rules="[
                          {
                            required: true,
                            message: '客户组织机构信息不可为空！',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          v-model="customerInfoForm.customerorgan"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>

                      <el-form-item
                        label="地址信息"
                        prop="customeraddress"
                        :rules="[
                          {
                            required: true,
                            message: '地址信息不可为空！',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          v-model="customerInfoForm.customeraddress"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>

                      <el-form-item
                        label="联系电话"
                        prop="customerphone"
                        :rules="[
                          {
                            required: true,
                            message: '联系电话不可为空！',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          v-model="customerInfoForm.customerphone"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>

                      <el-form-item
                        label="承办人"
                        prop="undertaker"
                        :rules="[
                          {
                            required: true,
                            message: '承办人信息不可为空！',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          v-model="customerInfoForm.undertaker"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>

                      <el-button
                        class="btnUpdate"
                        @click="submitUpdateInfoForm('customerInfoRef')"
                        type="success"
                        plain
                      >
                        <i class="el-icon-edit"></i> 更 改
                      </el-button>
                    </el-form>
                  </el-tab-pane>

                  <!-- 用户信息面板 -->
                  <el-tab-pane label="用户信息">
                    <div>
                      <el-form label-width="80px" :model="userInfoForm">
                        <el-form-item label="用户名">
                          <el-input
                            disabled
                            v-model="userInfoForm.username"
                            auto-complete="off"
                          ></el-input>
                        </el-form-item>

                        <el-form-item label="密码">
                          <el-input
                            type="password"
                            disabled
                            v-model="userInfoForm.password"
                            auto-complete="off"
                          ></el-input>
                        </el-form-item>

                        <el-button
                          class="btnUpdate"
                          @click="updatePassword"
                          type="info"
                          plain
                        >
                          <i class="el-icon-paperclip"></i> 修改密码
                        </el-button>
                      </el-form>

                      <el-dialog
                        class="dialog"
                        title="更改密码"
                        :visible.sync="dialogUpdatePasswordVisible"
                      >
                        <el-form
                          :rules="updatePasswordRules"
                          ref="updatePasswordRef"
                          :model="updatePasswordForm"
                        >
                          <el-form-item
                            prop="oldpassword"
                            label="旧密码"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              type="password"
                              v-model="updatePasswordForm.oldpassword"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>

                          <el-form-item
                            prop="firstnewpassword"
                            label="新密码"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              type="password"
                              v-model="updatePasswordForm.firstnewpassword"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>

                          <el-form-item
                            prop="secondnewpassword"
                            label="再次输入"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              type="password"
                              v-model="updatePasswordForm.secondnewpassword"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                          <el-button
                            type="danger"
                            @click="dialogUpdatePasswordVisible = false"
                            >取 消</el-button
                          >
                          <el-button
                            type="primary"
                            @click="submitUpdatePassword('updatePasswordRef')"
                            >提 交</el-button
                          >
                        </div>
                      </el-dialog>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <my-component-footer />
      </el-footer>
    </el-container>
  </span>
</template>

<script>
import Header from "../components/Header.vue";
import NavMenu from "../components/NavMenu.vue";
import Footer from "../components/Footer.vue";
import baseMixin from "../mixin/baseMixin";
import {
  selectMyOrders,
  updateCustomerInfo,
  selectCustomerInfo,
} from "../api/customer";
import { userUpdatePassword } from "../api/user";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
  },
  data() {
    // 新密码
    const validateNewPassword = (rule, value, callback) => {
      if (typeof value === "undefined") {
        callback(new Error("请再次输入密码!"));
      } else if (value !== this.updatePasswordForm.firstnewpassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      defaultActivate: "1",
      userInfoForm: {},
      dialogUpdatePasswordVisible: false,
      updatePasswordRules: {
        oldpassword: [
          {
            required: true,
            message: "旧密码信息不能为空！",
            trigger: "blur",
          },
        ],
        firstnewpassword: [
          {
            required: true,
            message: "新密码不能为空！",
            trigger: "blur",
          },
        ],
        secondnewpassword: [
          {
            required: true,
            validator: validateNewPassword,
            trigger: "blur",
          },
        ],
      },
      updatePasswordForm: {},
    };
  },
  created() {
    let user = this.getUserInfo();
    let username = user.username;
    this.userInfoForm = user;
    this.customerInfoForm.customername =
      this.customerInfoForm.username =
      this.updatePasswordForm.username =
        username;

    selectCustomerInfo(username)
      .then((res) => {
        let customer = res.data;
        this.customerInfoForm = customer;
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
  methods: {
    updatePassword() {
      this.dialogUpdatePasswordVisible = true;
    },
    submitUpdatePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userUpdatePassword(this.updatePasswordForm)
            .then((res) => {
              let code = res.code;
              let message = res.message;
              if (code === 201) {
                this.$message.error(message);
              } else {
                this.$message.success(message);
                this.logOut();
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    submitUpdateInfoForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateCustomerInfo(this.customerInfoForm)
            .then((res) => {
              let code = res.code;
              let message = res.message;
              if (code === 201) {
                this.$message.error(message);
              } else {
                this.$message.success(message);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/css/global.scss";
.btnUpdate {
  margin-left: 15px;
}
</style>